<template>
  <div>
    <!-- 模糊查询框 -->
    <br>
    <div align="center">
      <h1>总销售额</h1>
    </div>
    <br>
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" align="center">
      <el-form-item label="产品名字" prop="productName">
        <el-input size="small" clearable v-model="keyword.productName" placeholder="产品名字"></el-input>
      </el-form-item>
      <el-form-item label="销售人员" prop="salesName">
        <el-input size="small" clearable v-model="keyword.salesName" placeholder="销售人员"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                   icon="el-icon-refresh"
        >重置
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" @click="openAddDialog" icon="el-icon-plus">添加信息</el-button>
        <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select v-model="keyword.customerType" placeholder="客户类型" size="small" @change="search">
          <el-option v-for="item in options" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>


    <!-- 中间框 -->
    <el-table :data="totalSalesList" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="productName" label="产品名字" align="center">
      </el-table-column>
      <el-table-column prop="productPrice" label="产品单价" align="center">
      </el-table-column>
      <el-table-column prop="customerName" label="客户名称" align="center">
      </el-table-column>
      <el-table-column prop="customerType" label="客户类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.customerType == 'VIP' ? '' : 'danger'">
            <span>{{ scope.row.customerType == 'VIP' ? 'VIP' : '普通' }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="salesNum" label="销售数量" align="center">
      </el-table-column>
      <el-table-column prop="salesTotal" label="销售总额" align="center">
      </el-table-column>
      <el-table-column prop="storeName" label="店铺名" align="center">
      </el-table-column>
      <el-table-column prop="salesName" label="销售人员" align="center">
      </el-table-column>
      <el-table-column prop="salesState" label="销售国家" align="center">
      </el-table-column>
      <el-table-column prop="salesTime" label="销售时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="change1(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="dialogAdd" width="30%">
      <el-form ref="totalSalesRulesForm" :model="totalSales" :rules="totalSalesRules" label-width="80px">
        <el-form-item label="产品名字" prop="productName">
          <el-input v-model="totalSales.productName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="productPrice">
          <el-input v-model="totalSales.productPrice" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="totalSales.customerName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="客户类型" prop="customerType">
          <el-radio-group v-model="totalSales.customerType">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <el-radio label="VIP">VIP</el-radio>
            <el-radio label="普通">普通</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="销售数量" prop="salesNum">
          <el-input v-model="totalSales.salesNum" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售总额" prop="salesTotal">
          <el-input v-model="totalSales.salesTotal" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="storeName">
          <el-input v-model="totalSales.storeName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售人员" prop="salesName">
          <el-input v-model="totalSales.salesName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售国家" prop="salesState">
          <el-input v-model="totalSales.salesState" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售时间" prop="salesTime">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="totalSales.salesTime" autocomplete="off" style="width:300px"
                            type="datetime" placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addonSubmit('totalSalesRulesForm')">确定</el-button>
        <el-button @click="dialogAdd = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 更新对话框 -->
    <el-dialog title="更新" :visible.sync="dialogUpdate" width="30%">
      <el-form ref="totalSalesRulesForm" :model="totalSales" :rules="totalSalesRules" label-width="80px">
        <el-form-item label="产品名字" prop="productName">
          <el-input v-model="totalSales.productName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="productPrice">
          <el-input v-model="totalSales.productPrice" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="totalSales.customerName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="客户类型" prop="customerType">
          <el-radio-group v-model="totalSales.customerType">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <el-radio label="VIP">VIP</el-radio>
            <el-radio label="普通">普通</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="销售数量" prop="salesNum">
          <el-input v-model="totalSales.salesNum" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售总额" prop="salesTotal">
          <el-input v-model="totalSales.salesTotal" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="storeName">
          <el-input v-model="totalSales.storeName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售人员" prop="salesName">
          <el-input v-model="totalSales.salesName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售国家" prop="salesState">
          <el-input v-model="totalSales.salesState" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售时间" prop="salesTime">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="totalSales.salesTime" autocomplete="off" style="width:300px"
                            type="datetime" placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateonSubmit('totalSalesRulesForm')">确定</el-button>
        <el-button @click="dialogUpdate = false">取消</el-button>
      </div>
    </el-dialog>


    <!-- 页码框 -->
    <br>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[5, 10, 20]" :page-size="100" align="center" layout="total,sizes,prev,pager,next,jumper"
                   :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
// 导入自己封装的api请求方法
import { getList, deleteById, addTotalSales, delBatch, change, findAll2 } from '@/api/user'

export default {
  name: 'Sales',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      value3: '',
      // 遮罩层
      loading: true,
      options: [],
      totalSalesList: [],
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      keyword: {
        productName: null,
        salesName: null,
        customerType: null
      },
      ids: [],
      title: '',
      dialogAdd: false,
      dialogUpdate: false,
      totalSales: {
        productId: null,
        productName: null,
        productPrice: null,
        customerName: null,
        customerType: null,
        salesNum: null,
        salesTotal: null,
        storeName: null,
        salesName: null,
        salesState: null,
        salesTime: null
      },
      totalSalesRules: {
        productName: [
          { required: true, message: '产品名字不能为空', trigger: 'blur' }
        ],
        productPrice: [
          { required: true, message: '产品单价不能为空', trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        customerType: [
          { required: true, message: '客户类型不能为空', trigger: 'blur' }
        ],
        salesNum: [
          { required: true, message: '销售数量不能为空', trigger: 'blur' }
        ],
        salesTotal: [
          { required: true, message: '销售总额不能为空', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: '店铺名不能为空', trigger: 'blur' }
        ],
        salesName: [
          { required: true, message: '销售人员不能为空', trigger: 'blur' }
        ],
        salesState: [
          { required: true, message: '销售国家不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    fetchData() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        productName: this.keyword.productName,
        salesName: this.keyword.salesName,
        customerType: this.keyword.customerType

      }
      // getList是api/type.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo",pageInfo)
        this.loading = false
        console.log(res.data)
        this.totalSalesList = res.data.list
        this.total = pageInfo.total
      })
    },
    //根据条件查询
    aaa() {
      findAll2().then(res => {
          this.options = res.data
        }
      )
    },
    // 根据id删除
    handleDelete(row) {
      //console.log(row.productId)
      this.$confirm('是否确认删除单位编号为' + '\'' + row.productId + '\'' + '的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.productId
        }
        deleteById(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = []
      // console.log(selectionRowArr)
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].productId)
      }
      // console.log("ids",this.ids)
    },
    //页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    //当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    // 模糊搜索
    search() {
      this.fetchData()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    // 打开添加对话框
    openAddDialog() {
      this.dialogAdd = true
      console.log(this.$refs)
      this.title = '添加'

    },
    // 添加计量单位
    addonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 此处执行添加...
          console.log(this.totalSales)
          addTotalSales(this.totalSales).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.dialogAdd = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogAdd = false
      })

    },
    // 批量删除
    deleteBatch() {
      this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idStr = this.ids.join(',')
        console.log('idStr', idStr)
        let params = {
          ids: this.ids.join(',')
        }
        delBatch(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开更新对话框
    change1(row) {
      this.title = '更新'
      this.dialogUpdate = true
      this.totalSales.productName = row.productName
      this.totalSales.productPrice = row.productPrice
      this.totalSales.customerName = row.customerName
      this.totalSales.customerType = row.customerType
      this.totalSales.salesNum = row.salesNum
      this.totalSales.salesTotal = row.salesTotal
      this.totalSales.storeName = row.storeName
      this.totalSales.salesName = row.salesName
      this.totalSales.salesState = row.salesState
      this.totalSales.salesTime = row.salesTime
      this.totalSales.productId = row.productId
      console.log(row.productId)
    },
    // 更改
    updateonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.totalSales)
          change(this.totalSales).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功!'

            })
            this.dialogUpdate = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogUpdate = false

      })
    }

  },
  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    this.fetchData()
    this.aaa()
  }
}
</script>

<style scoped lang="scss"></style>
